<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <span>uppper</span>
  <div class="box" id="box" name="box" data-id="123">
    hello
    <p>你好</p>
    <!-- 一段注释 -->
    <p>世界</p>
    world
  </div>
  <span>down</span>
 
</body>
</html>

<script>
// 英文： 
  // comment - 注释
  // previous - 之前的;先前的
  // sibling  - 兄弟姐妹

const box = document.querySelector('.box');

// 1. box.childNodes   ->  元素下面的所有「节点」（元素、文本、注释）
// 2. box.children  ->  元素下面的 所有 子元素 节点
// 3. box.firstChild ->  元素下的第一个 子节点
// 4. box.firstElementChild  -> 元素下的第一个 子标签节点
// 5. box.lastChild -> 元素下的 最后一个 节点
// 6. box.lastElementChild  ->  元素下的 最后一个 子标签节点
// 7. box.previousSibling    ->  上一个 兄弟 节点
// 8. box.previousElementSibling   ->  上一个 兄弟 标签节点
// 9. box.nextSibling         -> 下一个 兄弟 节点
// 10. box.nextElementSibling -> 下一个 兄弟 标签节点
// 11. box.parentNode    ->  上一级(父级) 节点
// 12. box.parentElement  ->  上一级(父级) 标签节点
// 13. box.attributes  ->  获取 本 DOM元素 的所有属性
console.log();



</script>
